<template>
    
    <!-- 组件的模板 -->
    <div class="page statistics yf-formtjlist" v-if="isshow">
        <div class="topbar_2 com-border-bottom">
            <!-- <div class="data"><span class="state_1">51人提交</span><span class="state_2">5人未提交</span></div> -->
            <!-- <div class="data">请选择日期</div> -->
            <div class="calendar">
                <span class="btn_pre" @click="btn_left"></span>
                <span class="date" @click="btn_mid">{{report_data}}</span>
                <span class="btn_nxt" @click="btn_rignt"></span>
            </div>
        </div>
        <div class="margin-cg yf-formlistnavigation">
            <div class="scroller-wrap">
                <div class="mod-crumbs bg-color">
                    <div class="weui-cell__bd ">
                        <div class="nav-item" v-for="(index,hierarchy) in hierarchyList" >
                        <span v-if="index!=0" class="arrow">&gt;</span>
                        <a v-if="index < hierarchyList.length - 1" @click.prevent="stepHierarchy(index)" >{{hierarchy.group_name}}</a>
                        <template v-else><a style="color:#bbb">{{hierarchy.group_name}}</a></template>
                        </div>
                    </div>
                </div>
             </div>
       </div>
        <empty :show-empty="user_list.length === 0 && group_list.length === 0" :msg="'暂无表单'"></empty>
        <template v-if="group_list.length > 0">
        <ul class="form-list">
            <li class="com-border-bottom" v-for="list in group_list" @click="gotoMemberSubmitDetail(list.group_id,list.group_name)">
                <a class="link-access touch" href="javascript:;">
                    <div class="yf-formtjlist-img">
                        <span class="bg_sprite icon icon_team"></span>
                    </div>
                    <div class="l yf-updatacont">
                        <h2>{{list.group_name}}</h2>
                        <p class="count">上报人数：<span>{{list.record_user_num}}</span>人</p>
                    </div>
                    <div class="r countform">
                        <p class="">上报 <span>{{list.record_total_num}}</span> 份</p>
                    </div>
                </a>
            </li>
        </ul>
        <h3></h3>
        </template>
        <template v-if="user_list.length > 0">
        <ul class="form-list" v-if="true">
            <li class="com-border-bottom" v-for="list in user_list" >
                <a class="link-access touch" href="javascript:;">
                    <div class="yf-formtjlist-img" @click="toUserInfo(list.user_id)">
                        <img v-if="list.logo.thumb_url" :src="list.logo.thumb_url">
                        <img v-else src="../../static/imgs/avatar.png">
                    </div>
                    <div class="formdetail" @click="gotoFormTjDetail(list.last_record_id)">
                        <div class="l">
                            <h2>{{list.user_name}}</h2>
                            <p class="count">最近上报：{{list.time}}</p>
                        </div>
                        <div class="r countform">
                            <p class="">上报 <span>{{list.record_total_num}}</span> 份</p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </template>
<!--         <ul class="data-list">
            <li class="com-border-bottom" v-for="list in team_form_list"  @click="gotoFormTjDetail(list.id)">
                <a class="touch" href="javascript:;">
                    <div class="info">
                        <h2>{{list.title}}</h2>
                        <p>提交人员：{{list.user_name}}</p>
                        <p class="noWrap">所属小组：{{list.group_name}}</p>
                    </div>
                    <span class="time">{{list.submit_time}}</span>
                </a>
            </li>
        </ul> -->
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import Empty from 'components/Empty/Empty'

    /**

     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                team_form_list: '', //[]
                report_data: '',
                user_info: {},
                form_id: 0,
                timestr: 0,  //当天的时间戳
                page_no: 1,
                pageEnd: false,
                group_id:0,
                today: '',
                group_list:[],
                offset:10,
                isshow:false,
                hierarchyList:[],
                scrolltype:false,
                user_list:[]
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.form_id = util.getUrddataString('form_id');
                this.group_id = util.getUrddataString('group_id') || 0;
                //组根节点group_id默认取零
                if(this.group_id != 0){
                    cache.getMemoryCache('hierarchyList',(data)=>{
                        if(data){
                            this.hierarchyList = data;
                        }
                    })
                }else{
                    let webviewid,
                        project_name = util.getUrddataString('project_name');
                    commonPage.getWebViewID((data)=>{
                        webviewid = data;
                        this.hierarchyList = [{group_id:this.group_id,group_name:project_name,'webviewid':webviewid}]
                    });
                }
                let seltime = util.getUrddataString('seltime'),
                    date =  seltime ? new Date(seltime) : new Date();
                this.timestr =  date.getTime()
                this.report_data = util.getLocalTime(this.timestr, 'yyyy-MM-dd')
                this.today = this.report_data
                cache.getCache('user_info', (data) => {
                    this.user_info = data
                    this.getTeamFormList()
                });
                let that = this;
                that.$nextTick(function(){
                    this.scrolltype = true;
                })
                $(window).on('scroll',function(){
                    if(that.scrolltype && that.user_list.length > 0){
                        var scrollTop = $(this).scrollTop();
                        var scrollHeight = $(document).height();
                        var windowHeight = $(this).height();
                        if(scrollTop + windowHeight  == scrollHeight){
                            if(!that.pageEnd){
                                that.pageEnd = true;
                                commonPage.loadPageStatus('loading')
                                that.page_no ++;
                                util.ajax({
                                    url: '/form/group/list',
                                    type: 'GET',
                                    data: {
                                        team_id: that.user_info.team_id,
                                        project_id: that.user_info.project_id,
                                        create_time: (new Date(that.report_data)).getTime()/1000,
                                        group_id:that.group_id,
                                        offset:that.offset,
                                        form_id:that.form_id,
                                        page_no:that.page_no
                                    },
                                    success: (data) => {
                                        that.pageEnd = false;
                                        if(data.errno == 0){
                                            console.log("表单统计列表数据"+JSON.stringify(data))
                                            let user_list = data.data.user_list;
                                            if(user_list.length === 0){
                                                commonPage.loadPageStatus('loadSuccess')
                                                widget.toast('没有更多了')
                                                that.pageEnd = true;
                                            }
                                            for(let i = 0 , lg = user_list.length; i < lg; i++){
                                                user_list[i].time = util.getLocalTime(user_list[i].last_time*1000, 'HH:mm')
                                            }
                                            that.user_list = that.user_list.concat(user_list);
                                        }else{
                                            widget.toast(data.errmsg)
                                        }
                                        // alert(JSON.stringify(data))
                                        commonPage.loadPageStatus('loadSuccess')
                                    },
                                    error: (xhr, status) => {
                                        // error
                                        widget.toast('网络连接失败，请检查网络')
                                        commonPage.loadPageStatus('loadSuccess')
                                        that.pageEnd = false;
                                    },
                                    noNetwork: () => {
                                        // 无网络的回调
                                        widget.toast('网络连接失败，请检查网络')
                                        commonPage.loadPageStatus('loadSuccess')
                                        that.pageEnd = false;
                                    }
                                })
                            }else{
                                // widget.toast('已加载全部')
                            }
                            
                        }
                    }
                });
                window.loadData = () => {
                    // this.getTeamFormList()
                }
                
            },
            stepHierarchy(index){
                commonPage.goBack(0,{}, this.hierarchyList[++index].webviewid);
            },
            gotoFormTjDetail (id){
                let encodeStr = encodeURIComponent(`type=team&record_id=${id}`)
                location.href = `dmsaas://FormTjDetail?urdData=${encodeStr}`
            },
            gotoMemberSubmitDetail (group_id,group_name,index){
                //埋点
                let statisticsLog_data = {
                    event_id: '表单统计-查看下级小组',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'lowgroup',
                        project_id: this.user_info.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)

                commonPage.getWebViewID((data)=>{
                    let thishierarchyList = [],
                    webviewid = data;
                    thishierarchyList = this.hierarchyList.slice(0,this.hierarchyList.length);
                    thishierarchyList.push({group_id:group_id,group_name:group_name,webviewid:webviewid});
                    cache.setMemoryCache(`hierarchyList`,thishierarchyList)
                    let title = document.title,
                        form_id = this.form_id,
                        seltime = this.report_data,
                        encodeStr = encodeURIComponent(`form_id=${form_id}&form_title=${title}&group_id=${group_id}&seltime=${seltime}`);
                    location.href = `dmsaas://MemberSubmitDetail?urdData=${encodeStr}`
                });
            },
            btn_left (){
                // alert(typeof this.timestr)
                this.timestr = this.timestr - 3600 * 24 * 1000,
                this.report_data = util.getLocalTime(this.timestr, 'yyyy-MM-dd')
                // alert(this.report_data)
                this.getTeamFormList(0)
            },
            btn_rignt (){
                if(this.today > this.report_data){                    
                    this.timestr = this.timestr + 3600 * 24 * 1000
                    this.report_data = util.getLocalTime(this.timestr, 'yyyy-MM-dd');
                    this.getTeamFormList(1)
                }else{
                    widget.toast('不能查看当日以后的日期')
                }
            },
            btn_mid (){
                KCApiApp.showDatePicker('2000-01-01', this.today, this.report_data, (data) => {
                    this.report_data = data.SelectedDate
                    this.timestr = util.getStampFromDate(data.SelectedDate)
                    this.getTeamFormList(2)
                })
            },
            getTeamFormList (type){
                commonPage.loadPageStatus('loading')
                this.pageEnd = false;
                this.page_no = 1;
                util.ajax({
                    url: '/form/group/list',
                    type: 'GET',
                    data: {
                        team_id: this.user_info.team_id,
                        project_id: this.user_info.project_id,
                        create_time:(new Date(this.report_data)).getTime()/1000,
                        group_id:this.group_id,
                        offset:this.offset,
                        page_no:this.page_no,
                        form_id:this.form_id
                    },
                    success: (data) => {
                        if(data.errno == 0){
                            console.log("表单统计列表数据"+JSON.stringify(data))
                            if(type == 2){
                                //埋点
                                let statisticsLog_data = {
                                    event_id: '表单统计-顶部日期',
                                    // event_label: data.event_label,(预留，现在不用传此参数)
                                    event_param: {
                                        ca_from: 'date',
                                        project_id: this.user_info.project_id,
                                    }
                                }
                                // alert(JSON.stringify(statisticsLog_data))
                                KCApiApp.statisticsLog(statisticsLog_data)

                            }else if(type == 0){
                                //埋点
                                let statisticsLog_data = {
                                    event_id: '表单统计-左箭头',
                                    // event_label: data.event_label,(预留，现在不用传此参数)
                                    event_param: {
                                        ca_from: 'predate',
                                        project_id: this.user_info.project_id,
                                    }
                                }
                                // alert(JSON.stringify(statisticsLog_data))
                                KCApiApp.statisticsLog(statisticsLog_data)

                            }else if(type == 1){
                                //埋点
                                let statisticsLog_data = {
                                    event_id: '表单统计-右箭头',
                                    // event_label: data.event_label,(预留，现在不用传此参数)
                                    event_param: {
                                        ca_from: 'nextdate',
                                        project_id: this.user_info.project_id,
                                    }
                                }
                                // alert(JSON.stringify(statisticsLog_data))
                                KCApiApp.statisticsLog(statisticsLog_data)

                            }
                            let user_list = data.data.user_list;
                            console.log(JSON.stringify(data))
                            for(let i = 0 , lg = user_list.length; i < lg; i++){
                                user_list[i].time = util.getLocalTime(user_list[i].last_time*1000, 'HH:mm')
                            }
                            this.user_list = user_list;
                            this.group_list = data.data.group_list;
                            this.isshow = true;
                            if(user_list.length < this.offset){
                                this.pageEnd = true;
                            }
                            // console.log(JSON.stringify(user_list))
                            // console.log(JSON.stringify(this.group_list))
                        }else{
                            widget.toast(data.errmsg)
                        }
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, status) => {
                        // error
                        widget.toast('网络连接失败，请检查网络')
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                        commonPage.loadPageStatus('loadSuccess')
                    }
                })
            },
            /*跳转到个人信息*/
            toUserInfo (uid){
                let url = `uid=${uid}&tid=${this.user_info.team_id}&pid=${this.user_info.project_id}`
                location.href = "dmsaas://ProjectMemberDetail?urdData=" + encodeURIComponent(url)
            }
        },
        created(){
            this.init();
            //是否有导出权限
            cache.getCache('permission_info', (data) => {
                // alert(JSON.stringify(data))
                data.forEach((obj) => {
                    if(obj.id_name === 'form_export'){
                        commonPage.updateTitleBar({
                            rightDisplay: true,            // 是否显示右按钮
                            rightText: '导出',            // 右按钮文案
                            rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                        })
                    }
                })
            });
            window.saveResume = () => {
                //埋点
                let statisticsLog_data = {
                    event_id: '表单统计-导出',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'download',
                        project_id: this.user_info.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)

                //跳至选择导出区间页(与签到公用)
                let export_sign_info = {
                    team_id: this.user_info.team_id,
                    project_id: this.user_info.project_id,
                    form_id: this.form_id
                }
                let temp = JSON.stringify(export_sign_info)
                let encodeStr = encodeURIComponent(`export_sign_info=${temp}&origin_page=form`)
                location.href = `dmsaas://ExportSign?urdData=${encodeStr}`
            }
            //滑到底部加载数据
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/form-report.css"></style>
<style type="text/css">
    /*一期暂定样式*/
    div.topbar_2 .calendar{
        margin:0 auto;
        height:44px;
        width:160px;
        float:none;
    }
    p.noWrap{
        /*max-width: 204px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .data-list div.info{
        margin-right: 0;
    }
    .nav-item{
        float: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mod-crumbs .arrow{
        margin:0 5px;
    }
    .icon_team{
        background-position: -88px -143px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 0;
    }
    .mod-crumbs{
        width: 100%;
        overflow: hidden;
    }
    .formdetail{
        width: 80%;
    }
</style>


